<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloworld</title>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--这里定义了一个输入框-->
    <input type="text" v-model="message">{{message}}

    <!--这是一个换行标签-->
    <br/>

    <!--这里定义了一个按钮，绑定点击事件，点击按钮就会调用getMsg方法-->
    <button type="button" @click="getMsg">点我呀</button>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'hello world'
        },
        methods:{
            //获取消息的方法
            getMsg(){
                axios.get("/hello", '').then(response => {
                    //请求成功运行这里面的代码
                    console.log(response);
                }).catch(function (error) {
                    //请求失败运行这里面的代码
                    console.log(error);
                });
            }
        }
    })
</script>
</html>
